<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zotero 设置</title>

</head>



<body>
    <div class="header-bar">
        <button class="reset-btn" onclick="resetToDefault()">恢复默认设置</button>
    </div>
    <div class="settings-card">
        <!-- 开关设置项 -->
        <div class="setting-item">
            <div class="label-group">
                <div class="label">Zotero跟随加载项启动</div>
                <div class="description">开启后自动运行Zotero</div>
            </div>
            <label class="switch">
                <input type="checkbox" id="zoteroSwitch" checked>
                <span class="slider"></span>
            </label>
        </div>

        <!-- 路径设置项 -->
        <div class="setting-item">
            <div class="label-group">
                <div class="label">Zotero路径</div>
                <div class="path-group">
                    <input type="text" class="path-input" placeholder="请选择Zotero安装路径" readonly id="zoteroPath">
                    <button class="modify-btn" onclick="setZoteroPath()">修改</button>
                </div>
            </div>
        </div>

        <div class="setting-group">
            <!-- 引注预览主开关 -->
            <div class="setting-item group-header">
                <div class="label-group">
                    <div class="label">引注预览</div>
                </div>
                <label class="switch">
                    <input type="checkbox" id="citation-preview" checked>
                    <span class="slider"></span>
                </label>
            </div>

            <!-- 鼠标跟随子选项 -->
            <div class="setting-item sub-item">
                <div class="label-group">
                    <div class="label">跟随鼠标展示</div>
                    <div class="description">开启后引注预览跟随鼠标位置</div>
                </div>
                <label class="switch">
                    <input type="checkbox" id="mouse-follow" checked>
                    <span class="slider"></span>
                </label>
            </div>
        </div>
    </div>


</body>
<script type="text/javascript" src="../js/zoteroSet.js"></script>
<script type="text/javascript" src="../js/wpsApp.js"></script>
<script type="text/javascript" src="../js/util.js"></script>

<script>
    // 在文件顶部添加showToast函数定义
    function showToast(message, type = 'success') {
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.textContent = message;
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 2000); // 延长显示时间为2秒
    }

    window.onload = async function () {
        const osInfo = detectOS();
        let settingsJson = getSettingsJson(osInfo);


        //console.log("zotero设置页读取，配置缓存为" + window.localStorage.getItem("addonConfig"))
        // 设置开关状态
        const switchInput = document.getElementById('zoteroSwitch');
        if (!switchInput) {
            throw new Error('页面元素未正确加载');
        }
        const zoteroSwitchValue = settingsJson.zoteroSwitch;
        //console.log("zoteroSwitchValue的值为：" + zoteroSwitchValue)
        switchInput.checked = zoteroSwitchValue;

        const switchcitation = document.getElementById('citation-preview');
        if (!switchcitation) {
            throw new Error('页面元素未正确加载');
        }
        const mouseFollow = document.getElementById('mouse-follow');

        const mouseFollowSwitch = document.getElementById('mouse-follow');

        const mouseFollowItem = document.querySelector('.sub-item');

        // 初始化鼠标跟随开关状态
        mouseFollow.checked = settingsJson.mouseFollow || false;

        mouseFollowSwitch.checked = settingsJson.mouseFollow;
        // 初始显示状态
        settingsJson.citationPreview ?
            mouseFollowItem.closest('.setting-group').classList.add('active') :
            mouseFollowItem.closest('.setting-group').classList.remove('active');


        const switchcitationValue = settingsJson.citationPreview;
        //console.log("zoteroSwitchValue的值为：" + switchcitationValue)
        switchcitation.checked = switchcitationValue;

        // 设置路径输入框值
        let pathInput = document.getElementById('zoteroPath');
        pathInput.value = settingsJson.zoteroPath[osInfo]

        // 开关状态改变事件
        switchInput.addEventListener('click', async function () {
            //alert("点击了开关")
            const newZoteroSwitchValue = this.checked;
            //alert("开关值为："+newZoteroSwitchValue)
            //alert("zoteroSwitch的值"+ settingsJson.zoteroSwitch)

            settingsJson.zoteroSwitch = newZoteroSwitchValue;
            setSettingsJson(settingsJson);
            showToast('设置成功！', 'success');

        });


        // 开关事件监听
        switchcitation.addEventListener('click', async function () {
            const newState = this.checked;
            const settingGroup = this.closest('.setting-group');

            if (!newState && mouseFollowSwitch.checked) {
                mouseFollowSwitch.checked = false;
                settingsJson.mouseFollow = false;
            }

            // 动画控制
            if (newState) {
                settingGroup.classList.add('active');
            } else {
                settingGroup.classList.remove('active');
            }

            settingsJson.citationPreview = newState;
            setSettingsJson(settingsJson);
            showToast('设置成功！');
        });

        // 鼠标跟随开关事件
        mouseFollow.addEventListener('click', function () {
            settingsJson.mouseFollow = this.checked;
            setSettingsJson(settingsJson);
            showToast('设置成功！');
        });
    }


    async function resetToDefault() {
        if (!confirm("确定要恢复所有默认设置吗？")) return;

        const osInfo = detectOS();
        const defaultSettings = {
            zoteroSwitch: false,
            citationPreview: true,
            mouseFollow: false,
            zoteroPath: {
                "windows": "C:/Program Files/Zotero/zotero.exe",
                "macos": "",
                "linux": ""
            }
        };

        // 更新并保存设置
        setSettingsJson(defaultSettings);

        // 更新界面元素
        document.getElementById('zoteroSwitch').checked = defaultSettings.zoteroSwitch;
        document.getElementById('citation-preview').checked = defaultSettings.citationPreview;
        document.getElementById('zoteroPath').value = defaultSettings.zoteroPath[osInfo];
        document.querySelector('.sub-item').style.display = defaultSettings.citationPreview ? 'flex' : 'none';
        showToast('已恢复默认设置', 'info');
    }
</script>
<style>
    * {
        margin: 0;
        padding: 0;

        font-family: 'Segoe UI', system-ui, sans-serif;
    }

    body {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    .header-bar {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 2000;
    }

    .toast {
        position: fixed;
        top: 20px;
        /* 修改为顶部定位 */
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 24px;
        border-radius: 8px;
        color: white;
        font-size: 14px;
        opacity: 0.95;
        animation: slideDown 0.3s ease-out;
        /* 修改动画名称 */
        z-index: 9999;
        /* 确保在最上层 */
    }

    .toast-success {
        background: #16c6e6;
    }

    .toast-info {
        background: #2196F3;
    }

    @keyframes slideDown {
        from {
            top: -50px;
            /* 从顶部上方开始 */
            opacity: 0;
        }

        to {
            top: 20px;
            /* 滑动到顶部位置 */
            opacity: 0.95;
        }
    }

    .reset-btn {
        background: #ff5722;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.2s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .reset-btn:hover {
        background: #f4511e;
    }

    .settings-card {
        position: relative;
        overflow: visible;
        /* 允许内容溢出 */
        transition: padding-bottom 0.3s ease;
        /* 添加底部过渡 */
        background: white;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        padding: 32px;
        width: 100%;
        max-width: 900px;
    }

    .setting-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: 1px solid #eee;
    }

    .setting-item:last-child {
        border-bottom: none;
    }

    .label-group {
        flex: 1;
        /* 让标签组占据更多空间 */
        margin-right: 2px;
        /* 减少与开关之间的间距 */
    }

    .label {
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
    }

    .description {
        font-size: 0.9em;
        color: #666;
    }

    /* 开关样式 */
    /* 调整开关的外边距 */
    .switch {
        position: relative;
        display: inline-block;
        width: 48px;
        /* 开关宽度 */
        height: 28px;
        /* 开关高度 */

    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* 新增组合容器样式 */
    .setting-group {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        margin: 15px 0;

        transition: all 1s ease;
    }

    .setting-group:hover {
        box-shadow: 0 2px 8px rgba(41, 41, 41, 0.1);
    }

    /* 子项缩进样式 */
    .sub-item {
        margin-left: 14px;

        border-top: 1px dashed #eee;
        padding-top: 15px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important;
        /* 保持原有布局 */
        transform: translateY(-10%);
    }

    /* 组合标题样式 */
    .group-header {
        padding-bottom: 10px;
    }

    /* 子项标签样式调整 */
    .sub-item .label {
        font-weight: 500;
        color: #252525;
    }

    .sub-item .description {
        color: #5c5b5b;
        font-size: 0.85em;
    }

    /* 新增子项容器 */
    .sub-item-container {
        position: absolute;
        top: 100%;
        /* 从父容器底部开始 */
        left: 0;
        right: 0;
        background: white;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        border-radius: 0 0 12px 12px;
    }

    .setting-group.active~.settings-card {
        padding-bottom: 60px;
        /* 根据内容高度调整 */

    }


    .setting-group.active .sub-item {
        max-height: 100px;
        /* 根据实际内容高度调整 */
        opacity: 1;
        transform: translateY(0);
        border-top: 1px dashed #eee;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .3s;
        border-radius: 34px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }

    input:checked+.slider {
        background-color: #4CAF50;
    }

    input:checked+.slider:before {
        transform: translateX(20px);
    }

    /* 路径输入框样式 */
    .path-group {
        display: flex;
        gap: 10px;
        width: 100%;
        /* 确保父容器占满可用宽度 */
    }

    .path-input {
        flex: 1;
        /* 让输入框占据剩余空间 */
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #f8f9fa;
        font-size: 14px;
        color: #333;
        min-width: 300px;
        /* 设置最小宽度，确保输入框足够长 */
        max-width: 100%;
        /* 防止输入框超出父容器 */
    }

    .path-input:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

    .modify-btn {
        background: #4CAF50;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .modify-btn:hover {
        background: #45a049;
    }

    .switch {
        width: 64px;
        /* 加宽开关容器 */
    }

    .slider {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 500;
        padding: 0 8px;
        color: white;
    }

    .slider::before {
        content: "关";
        position: absolute;
        right: 6px;
        transition: all 0.3s;
    }

    input:checked+.slider::before {
        content: "开";
        left: 6px;
        right: auto;
    }

    /* 调整滑块位置 */
    .slider:before {
        height: 22px;
        width: 22px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    input:checked+.slider:before {
        transform: translateX(34px);
        color: #4CAF50;
    }

    :root {
        --switch-on-color: #4CAF50;
        /* 开启颜色 */
        --switch-off-color: #ccc;
        /* 关闭颜色 */
        --switch-text-color: white;
        /* 文字颜色 */
        --switch-knob-size: 22px;
        /* 滑块大小 */
    }
</style>

</html>